<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-attention"></i> 系统监控
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-table
                        border
                        class="my_table_one"
                        :data="tableDataCPU"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="name"
                            label="属性"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="data"
                            label="值"
                            width="100">
                    </el-table-column>
                </el-table>

                <schart class="mys-chart_one" canvasId="pie1" :options="options3"></schart>
                <schart class="mys-chart_one mys-chart_add" canvasId="pie2" :options="options4"></schart>
            </div>

            <div class="my_low">
                <el-table
                        border
                        class="my_table_one"
                        :data="tableDataRAM"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="name"
                            label="属性"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="data"
                            label="值"
                            width="100">
                    </el-table-column>
                </el-table>
                <el-table
                        border
                        class="my_table_two"
                        :data="tableDataSys"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="name"
                            label="属性"
                            width="280">
                    </el-table-column>
                    <el-table-column
                            prop="data"
                            label="值"
                            width="320">
                    </el-table-column>

                </el-table>
            </div>

        </div>
    </div>

</template>

<script>
    import api from "../../../api"
    import Schart from "vue-schart";

    export default {
        name: 'sysInfo',
        components: {
            Schart
        },
        data() {
            return {
                // 数据
                data1: [],
                options3: {
                    type: 'pie',
                    title: {
                        text: 'CPU'
                    },
                    legend: {
                        position: 'left'
                    },
                    bgColor: '#fbfbfb',
                    labels: ['空闲', '系统使用', '用户使用'],
                    datasets: [
                        {
                            data: [null, null, null]
                        }
                    ]
                },
                options4: {
                    type: 'pie',
                    title: {
                        text: '内存'
                    },
                    legend: {
                        position: 'right'
                    },
                    bgColor: '#fbfbfb',
                    labels: ['空闲', '已使用'],
                    datasets: [
                        {
                            data: [null, null]
                        }
                    ]
                },
                //表格数据
                tableDataCPU: [{

                    name: '空闲率',
                    data: '',
                }, {

                    name: 'CPU核数',
                    data: ''
                }, {

                    name: 'CPU等待率',
                    data: '',
                }],
                tableDataRAM: [{

                    name: '总的物理内存',
                    data: '',
                }, {

                    name: '剩余的物理内存',
                    data: ''
                }, {

                    name: '已使用的物理内存',
                    data: '',
                }],
                tableDataSys: [{

                    name: '操作系统',
                    data: '',
                }, {

                    name: '程序启动时间',
                    data: ''
                }, {

                    name: 'JAVA_VERSION',
                    data: '',
                }, {

                    name: 'JAVA_HOME',
                    data: '',
                }]
            }
        },
        mounted() {
            this.initData();
        },

        methods: {
            tableRowClassName({row, rowIndex}) {
                console.log("row=" + row)
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //初始化数据
            initData() {
                this.requested = true;
                api.getInfo().then(res => {
                    console.log(res);
                    this.tableDataCPU[0].data = res.data.item.idleRate;
                    this.tableDataCPU[1].data = res.data.item.cpuNum;
                    this.tableDataCPU[2].data = res.data.item.cpuWaitingRate;
                    this.tableDataRAM[0].data = res.data.item.totalPhysicalMemory;
                    this.tableDataRAM[1].data = res.data.item.leftPhysicalMemory;
                    this.tableDataRAM[2].data = res.data.item.usePhysicalMemory;
                    this.tableDataSys[0].data = res.data.item.operatingSystem;
                    this.tableDataSys[1].data = res.data.item.startTime;
                    this.tableDataSys[2].data = res.data.item.javaVersion;
                    this.tableDataSys[3].data = res.data.item.javaHome;


                    this.options3.datasets[0].data = [res.data.item.leftCpu * 100,res.data.item.sysCpuUse * 100,res.data.item.userCpuUse * 100];
                    this.options4.datasets[0].data = [res.data.item.useMemory * 100,res.data.item.leftMemory * 100];
                    // var sysUse = res.data.sysCpuUse * 100;
                    // var userUse = res.data.userCpuUse * 100;
                    //
                    // var useMemory = res.data.useMemory * 100;
                    // var leftMemory = res.data.leftMemory * 100;
                });
            }
        }
    }

</script>
<style scoped>
    .my_low{
        margin-top: 100px;
    }
    .my_table_one {
        display: inline-block;
        margin-left: 20px;
        margin-right: 75px;
        width: 282px;
    }

    .my_table_two {
        display: inline-block;
        margin-left: 50px;
        width: 602px;
        vertical-align: -50px;
    }

    .mys-chart_one {
        display: inline-block;
        width: 380px;
        height: 300px;
        margin-top: 20px;
        vertical-align: -65px;
    }

    .mys-chart_add {
        /*margin-left: -10px;*/
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
